import React, { Component } from 'react'
import './leftside.scss'

import {  withRouter } from 'react-router-dom'

import {  getApiUserInfo } from "../../axios/api"
import { get  } from '../../axios/localstorage'

import { connect } from 'react-redux'


class leftside extends Component {

    state = {
        userinfo:{
        }
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    componentWillMount(){
        let token = get('token');
        if(token){
            let data = get('userinfo');

            if(data){
                this.setState({
                    userinfo:data
                })
            }
        }
    }

    componentWillReceiveProps(){
      if(this.props.location.pathname === '/user'){
        console.log(3456);
        this.getUserInfo();
      }
    }

    getUserInfo=()=>{

        if(!get('token')){
          return false;
        }
        let param = {
          token:get('token')
        }
    
        getApiUserInfo(param)
        .then( req =>{
          console.log(req.data)
          if(req.data.code === 1){
            this.setState({
              userinfo:req.data.data
            })
          }
        }).catch( err =>{
          console.error(err)
        })
    }
    

    render() {
        return (
            <div className='leftside'>

              <div className='leftBox'>
                <div className="left_info">
                    <img alt="" src={this.state.userinfo.avatar_text?this.state.userinfo.avatar_text:"assets/imgs/avatar.png"} />
                    <h2>{this.state.userinfo.nickname}</h2>
                    <p>{this.state.userinfo.mobile}</p>
                </div>

                <div className="left_tabs">
                    <div className="left_name">信息管理</div>
                    <div className={this.props.location.pathname === "/usercenter" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/usercenter')}}>个人中心<span></span></div>
                    <div className={this.props.location.pathname === "/user" || this.props.location.pathname === '/updatevip' || this.props.location.pathname ==='/joinvip'  ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/user')}}>个人信息<span></span></div>
                    
                    <div className={this.props.location.pathname === "/mynews" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mynews')}}>我的消息<span></span></div>
                    <div className={this.props.location.pathname === "/myactivity" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/myactivity')}}>我的活动<span></span></div>
                    <div className={this.props.location.pathname === "/myworks" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/myworks')}}>我的作品<span></span></div>
                    <div className="left_name">学习管理</div>
                    <div className={this.props.location.pathname === "/mycourse" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mycourse')}}>我的课程<span></span></div>
                    <div className={this.props.location.pathname === "/mysubscribe" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mysubscribe')}}>我的预约<span></span></div>
                    <div className={this.props.location.pathname === "/mynote" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mynote')}}>我的笔记<span></span></div>
                    <div className={this.props.location.pathname === "/mytest" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mytest')}}>我的考试<span></span></div>
                    <div className={this.props.location.pathname === "/mycertificate" ? "left_item left_choosen":"left_item"} onClick={()=>{this.gotoPage('/mycertificate')}}>我的证书<span></span></div>
                </div>
              </div>

                
                
            </div>
        )
    }
}

const mapStateToProps = state => {

  
  return {
    info: state.info,
  }
};


export default withRouter(connect(mapStateToProps)(leftside));

